<template>
  <!-- 根容器：必须有一个根元素包裹 -->
  <div class="app-root">
    <!-- 页面标题 -->
    <header class="app-header">
      <h1>AI面试助手系统</h1>
    </header>

    <!-- 导航栏：简化版路由切换 -->
    <nav class="app-nav">
      <router-link to="/interview">模拟面试</router-link>
      <router-link to="/resume">简历评估</router-link>
      <router-link to="/selfintro">自我介绍评价</router-link>
      <router-link to="/jobmatch">岗位匹配</router-link>
    </nav>

    <!-- 路由内容区域：显示当前选中的功能页面 -->
    <main class="app-content">
      <router-view />
    </main>
  </div>
</template>

<script>
// 根组件逻辑（简化，仅确保组件正常导出）
export default {
  name: 'App',
  // 组件挂载时的生命周期钩子，用于验证是否执行
  mounted() {
    console.log('App.vue 已挂载，页面开始渲染');
  }
};
</script>

<style>
/* 基础样式：确保内容可见 */
.app-root {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.app-header {
  text-align: center;
  margin-bottom: 30px;
}

.app-header h1 {
  color: #333;
  margin: 0;
}

.app-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 路由链接样式 */
.app-nav a {
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.app-nav a.router-link-exact-active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.app-content {
  min-height: 400px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>